<template>
  <div id="choose">
    <el-form ref="form" :model="form" label-width="80px" style="width: 530px">
      <el-form-item label="题干">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="题目选项">
        <el-radio-group v-model="form.option">
          <el-radio label="0" style="margin-bottom: 20px">A&nbsp;&nbsp;&nbsp;<el-input style="width: 400px" v-model="contentA"></el-input>
          </el-radio>
          <el-radio label="1" style="margin-bottom: 20px">B&nbsp;&nbsp;&nbsp;<el-input style="width: 400px" v-model="contentB"></el-input>
          </el-radio>
          <el-radio label="2" style="margin-bottom: 20px">C&nbsp;&nbsp;&nbsp;<el-input style="width: 400px" v-model="contentC"></el-input>
          </el-radio>
          <el-radio label="3" style="margin-bottom: 20px">D&nbsp;&nbsp;&nbsp;<el-input style="width: 400px" v-model="contentD"></el-input>
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="答案解析">
        <el-input type="textarea" v-model="form.parsing"></el-input>
      </el-form-item>
      <el-form-item label="难易程度">
        <el-select v-model="form.hardLevel" placeholder="请选难易等级">
          <el-option label="易" value="1"></el-option>
          <el-option label="中" value="2"></el-option>
          <el-option label="难" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">添加</el-button>
        <el-button @click="returnUrl()">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Choose",
  data() {
    return {
      form: {
        title: '',
        option: '',
        parsing: '',
        hardLevel: ''
      },
      questionOption: [],
      questionAnswer: [],
      contentA: '',
      contentB: '',
      contentC: '',
      contentD: ''
    }
  },
  methods: {
    onSubmit() {
      this.questionOption.push(this.contentA)
      this.questionOption.push(this.contentB)
      this.questionOption.push(this.contentC)
      this.questionOption.push(this.contentD)
      // console.log(this.questionOption)
      this.questionAnswer.push(this.questionOption[this.form.option])
      // console.log(this.questionAnswer)
      let questionAo={
        courseId:localStorage.getItem('courseIndex'),
        questionAnswer:this.questionAnswer,
        questionHardLevel:this.form.hardLevel,
        questionOption:this.questionOption,
        questionResolve:this.form.parsing,
        questionSortId:localStorage.getItem('questionSortId'),
        questionTitle:this.form.title,
        userName:localStorage.getItem('userName')
      }
      console.log(questionAo)
      axios( {
        url:'/question/add',
        data:questionAo,
        method: 'Post',
        headers: {
          "Content-type": "application/json;charset=utf-8"
        }
      }).then(res => {
        console.log(res.data)
        this.$router.push('/Question')
      }).catch(function (error) {
        console.log(error);
      });

    },
    returnUrl(){
      this.$router.push('/Question')
    }
  }
}
</script>

<style scoped>

</style>
